<!-- 分部分项维护 -->
<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-card class="updateProjectDivision">
      <title-name title="基础信息" />
      <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <custom-form :formList="formUnit" :form="form" :is-emit="false" :edit-model="'E'" is-validate> </custom-form>
        <!-- 工程类别 -->
        <title-name title="项目分部分项信息" />
        <a-spin :spinning="spinning">
          <a-row type="flex" justify="space-between" align="middle" style="flex-wrap: nowrap; width: 100%">
            <!-- 工程类别列表 -->
            <div style="width: calc(100% - 470px)">
              <TabsProductType :id.sync="projectTypeId" ref="tabs" is-all :option.sync="projectType" :projectId="form.projectId" @switch="getSubItem" @switchData="switchData" />
            </div>
          </a-row>
          <!-- 分部分项设置节点 -->
          <div>
            <!-- 树列表 -->
            <tree-search
              :id="projectTypeId"
              ref="treeSearch"
              is-all
              :show-search="false"
              :api="api"
              :query="{ enabled: enabled, projectTypeId: {projectTypeId:projectTypeId,subProjectId:form.projectId,sourceId:sourceId} }"
              :initExpandAll="false"
              :formList="formList"
              :rulesField="rulesField"
              :selected-keys.sync="selectedKeys"
              @select="onSelect"
              @refreshTab="refreshTab"
              :dataChildren="true"
            >
              <!-- 节点头部操作栏 -->
              <template #header="scope">
                <div class="mb12" v-if="isTabsProductType">
                  <a-button v-btnPermission="'qm_028_02_add_04'" :disabled="selectedKeys && selectedKeys.length < 1 ||  editModel*1 == 0" class="btn_right" type="primary" icon="plus" @click="scope.handleOperate(0),disabledProject = false"> 添加节点 </a-button>
                  <a-button v-btnPermission="'qm_028_02_edi_05'" class="btn_right" :disabled="(selectedKeys && selectedKeys.length < 1) || !scope.selectOptions.parentId || editModel*1 == 0" type="primary" icon="edit" @click="scope.handleOperate(1),disabledProject = true"> 编辑节点 </a-button>
                  <a-button
                    v-btnPermission="!scope.selectOptions.enabled ?'qm_028_02_sta_07': 'qm_028_02_sto_06'"
                    class="btn_right"
                    :type="!scope.selectOptions.enabled ? 'primary' : 'danger'"
                    :disabled="(selectedKeys && scope.selectedKeys.length < 1) || !scope.selectOptions.parentId  || editModel*1 == 0"
                    :icon="!scope.selectOptions.enabled ? 'play-circle' : 'stop'"
                    @click="scope.handleStopNode"
                  >
                    {{ !scope.selectOptions.enabled ? '启用' : '停用' }}节点
                  </a-button>
                  <a-button
                    v-btnPermission="!enabled ? 'qm_028_02_dsta_09' : 'qm_028_02_hsto_08'"
                    :type="enabled ? 'primary' : 'danger'"
                    :icon="enabled ? 'eye' : 'eye-invisible'"
                    :disabled="(selectedKeys && scope.selectedKeys.length < 1  || editModel*1 == 0)"
                    @click="
                      enabled = enabled === true ? '' : true
                      getSubItem()
                    "
                  >
                    {{ enabled ? '显示' : '隐藏' }}停用节点
                  </a-button>
                </div>
              </template>
            </tree-search>
          </div>
        </a-spin>
      </a-form-model>
    </a-card>
    <!-- 页脚操作栏 -->
    <div class="btn_box page-btn-right-top">
      <a-button type="primary" @click="handleActiveClose"> 关闭 </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import addProductClassify from '@/views/quality/currency/subItemMaintenance/addProductClassify.vue' // 工程类别表单弹窗
import TreeSearch from '@/components/businessComponents/TreeSearch' // 树
import TabsProductType from './tabsProductType' // 工程类别tabs
import { projectSubItem,subItem} from '@/api/quality/currency' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import SelectTreeProjectItem from '@/components/Select/SelectTreeProjectItem' // 分部分项

export default {
  name: 'a' + Date.now(),
  extends: new BaseEditPage(),
  components: {
    addProductClassify,
    TreeSearch,
    TabsProductType,
    SelectTreeProjectItem
  },
  computed: {
    api() {
      return subItem
    },
    formList() {
      return [
        {
          keyName: 'jzId',
          type: SelectTreeProjectItem,
          span: 24,
          label: '基准分部分项',
          disabled:this.disabledProject,
          attrs: {
            typeId: this.typeId,
            iSprojectFx:true,
          },
          change: (value, label) => {}
        }
      ]
    },
    formUnit() {
      return [
        {
          label: '所属单位',
          type: 'orgTree',
          keyName: 'projectId',
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          span: 16,
          isAutoSelectFirst: true,
          checkStrictly: true,
          needTags: ['BC', 'PD'],
          isQueryProjecDetail: false,
          disabled:this.editModel*1<=1
        }
      ]
    }
  },
  data() {
    return {
      enabled: '', // 是否隐藏停用节点
      projectType: {}, //选中工程类别对象
      spinning: false, // 工程类别加载控件
      editModel: 0, // 操作类型：0 添加 1 编辑
      selectedKeys: [], // 选中节点数组
      visible: false, // 工程类别弹窗控件
      projectTypeId: '', // 工程类别选项控件
      isRefreshTab:false,
      rulesField: {
        jzId: [{ required: true, whitespace: true, message: '请选择基准分部分项', trigger: 'change' }]
      },
      form: {
        projectId: ''
      },
      typeId:null,
      //teb的sourceId
      sourceId: null,
      sources:null,
      isTabsProductType: false, //tab 是否有数据
      disabledProject:false,  // 编辑是禁用项目分部分项
      isRefreshTypeId:true, //是否刷新tab，刷新 false
      tabsProductTypeData:[], //tab数据
    }
  },
  watch: {
    'form.projectId'(val) {
      this.projectTypeId = ''
    },
  },
  mounted(){
    this.form.projectId = this.$route.query.projectId? this.$route.query.projectId:this.$currentPost()?.projectId;
  },
  methods: {
    getSubItem(data1, data2,flag) {  //flag 是否点击切换
      this.sourceId = data2
      console.log(this.sourceId,'1')
      if(flag){
        this.isRefreshTypeId = true;
      }
      if(this.isRefreshTypeId){
        this.typeId = this.sourceId  //用于查项目分部分项
        console.log(this.sourceId,'2')
      }
      this.$nextTick(() => {
        this.$refs.treeSearch?.getList().catch(() => {
          this.enabled = this.enabled === true ? '' : true
        })
      })
    },
    //是否有tab有数据
    switchData(data) {
      this.isTabsProductType = data?.length > 0 ? true : false;
      this.tabsProductTypeData = data;
    },
    onSelect(a,b){
      let projectTypeId = b?.selectedNodes[0]?.data?.props?.projectTypeId;
      let findData = this.tabsProductTypeData?.find((item)=>item.id === projectTypeId); //通过后端反的projectTypeId，找到对应的tab数据，取sourceId或者id
      if(b?.selectedNodes[0]?.data?.props.name == '所有'){
         this.typeId = findData?.sourceId || findData?.id;
         this.sources = 0;
      }else{
         this.typeId = this.selectedKeys[0];
         this.sources = 4;
      }
      let obj = {typeId:this.typeId,sources:this.sources}
      sessionStorage.setItem('projectItem',JSON.stringify(obj));
    },
    refreshTab(){
      this.$refs.tabs.getTitle(this.form.projectId);
      this.isRefreshTypeId = false;
    }
  }
}
</script>
<style scoped lang="less">
@deep: ~'>>>';
.updateProjectDivision{
  @{deep} .ant-input{
    border-color: #e4ac0b;
    background-color: #fff9e8;
    &:disabled{
        background-color: #f5f5f5;
        border: 1px solid #d9d9d9;
    }
  } 
}
</style>

